<template>
    <div class="datepicker-wrapper">
        <div class="datepicker-content">
            <Icon name="calendar"></Icon>
            <label for="date">日期</label>
            <div class="input-wrapper">
                <input id="date" type="date" v-model="selected" :max="today" required>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop, Watch} from 'vue-property-decorator';
    import dayjs from 'dayjs';

    @Component
    export default class DatePicker extends Vue {

        @Prop(String) selectedDate: string | undefined;

        selected = this.selectedDate;

        get today() {
            return dayjs().format('YYYY-MM-DD');
        }

        @Watch('selected')
        onSelectedDateChanged() {
            if (this.selected === '') {
                this.selected = dayjs().format('YYYY-MM-DD');
            } else if (dayjs(this.selected).isAfter(this.today)) {
                alert('明天的事情明天再说')
                this.selected = dayjs().format('YYYY-MM-DD');
            }
            this.$emit('update:date', this.selected);
        }

    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .datepicker-wrapper {
        @extend %tally-text-wrapper;

        .datepicker-content {
            @extend %tally-text-content;

            > .icon {
                @extend %svg-theme-color;
            }

            > label {
                font-weight: bold;
                color: $color-gray;
            }

            > .input-wrapper {

                width: 70vw;

                > input {
                    font-size: 1.2em;
                    text-align: center;
                    text-align-last: center;
                    margin-left: auto;
                    margin-right: auto;
                    width: 40vw;
                    line-height: 1.2em;
                    color: $color-gray;
                    appearance: none;
                    -moz-appearance: none;
                    -webkit-appearance: none;
                }
            }



        }
    }

</style>